<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:first-child{
            width: 800px;
            /* height: 100px; */
            background-color: khaki;
            /* margin: 0 auto; */
            /* line-height: 100px; */
            text-align: center;
        }
        div:last-child{
            height: 400px;
            width: 800px;
            /* margin: 0 auto; */
            background-color: lightgreen;
        }
        div:first-child button{
            /* height: 30px; */
            margin-left: 40px;
            background-color: hotpink;  
        }
        span{
            color: red;
            margin-left: 30px;
            font-size: 30px;
            font-weight: 500;
        }
        img{
            position:relative;
            left: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var btns=document.getElementsByTagName('button');
            var imgs=document.images;
            var span=document.getElementsByTagName('span')[0];
            //手动移动
            btns[0].onclick=function(){
                var id=setTimeout(function(){
                    imgs[0].style.left=imgs[0].offsetLeft+10+'px'
                },100)
                if(imgs[0].offsetLeft>680){
                    clearTimeout(id);
                }
            }
            //发射
            btns[1].onclick=function(){
                var id1=setInterval(function(){
                    span.textContent=--span.textContent;
                    if(span.textContent<=0){
                        clearInterval(id1);
                        imgs[0].style.left='200px';
                    }
                },1000)
            }
            //赛跑
            btns[2].onclick=function(){
                var id=setInterval(function(){
                    var random1=parseInt(Math.random()*10);
                    var random2=parseInt(Math.random()*10);
                    // console.log(random1,random2);
                    imgs[0].style.left=imgs[0].offsetLeft+random1+'px';
                    imgs[1].style.left=imgs[1].offsetLeft+random2+'px';
                    if(imgs[0].offsetLeft>680 || imgs[1].offsetLeft>680){
                        clearInterval(id);
                        if(imgs[0].offsetLeft>680){
                            alert('坦克1胜利');
                        }else if(imgs[0].offsetLeft==imgs[1].offsetLeft){
                            alert('平局')
                        }else{
                            alert('坦克2胜利');
                        }
                    }
                },1000)
            }
            //自动移动
            function run(){
                var id0=setInterval(function(){
                    imgs[0].style.left=imgs[0].offsetLeft+10+'px';
                    // console.log(imgs[0].offsetLeft);
                    // imgs[0].style.left=parseInt(imgs[0].style.left)+20+'px';
                    if(imgs[0].offsetLeft>680){
                        clearInterval(id0);
                        imgs[0].src='./坦克练习 间歇和超时调用/tanke_down.jpg'
                        var id1=setInterval(function(){
                            imgs[0].style.top=imgs[0].offsetTop+20+'px';
                            console.log(imgs[0].offsetTop);

                            if(imgs[0].offsetTop>250){
                                
                                clearInterval(id1);
                                imgs[0].src='./坦克练习 间歇和超时调用/tanke_left.jpg'
                                var id2=setInterval(function(){
                                    imgs[0].style.left=parseInt(imgs[0].style.left)-20+'px';
                                    if(imgs[0].offsetLeft<80){
                                        clearInterval(id2)
                                        imgs[0].src='./坦克练习 间歇和超时调用/tanke_up.jpg'
                                        var id3=setInterval(function(){
                                            imgs[0].style.top=parseInt(imgs[0].style.top)-20+'px';
                                            if(imgs[0].offsetTop<120){
                                                clearInterval(id3)
                                                imgs[0].src='./坦克练习 间歇和超时调用/tanke_right.jpg'
                                                run();
                                            }
                                        },100)
                                    }
                                },100)
                            }
                        },100)
                    }
                },100)
            }
            btns[3].onclick=run

        }
    </script>
</head>
<body>
    <div>
        <button>手动移动</button>
        <button>发射</button>
        <button>赛跑</button>
        <button>自动移动</button>
        <span>5</span>
    </div>
    <div>
        <img src="./坦克练习 间歇和超时调用/tanke_right.jpg" alt=""><br>
        <img src="./坦克练习 间歇和超时调用/tanke_right.jpg" alt="">
    </div>
    
</body>
</html>